<template>
	<el-popover ref="popover" popper-class="mp-micro padding-no is-multiple el-select-dropdown" :disabled="disabled" @hide="$emit('blur')" @show="$emit('show')" v-model="visible" trigger="click">
		<moSelect :data="options" :value="valueShow" ref="memberSelect" @handleCheckChange="handleCheckChange" @handleClickNode="handleClickNode" :showCheckbox="isCheckbox">
		</moSelect>
		<inputContent style='height:auto' v-clickoutside="hideOnly" :disabled="disabled" :clear="clear" :visible="visible" :selected="value" slot="reference" v-bind="$attrs">
			<div v-for="(one, index) in tagArr" style="margin-right:5px" :key="index">
				<memberLabel @close="close(one)" :item='one' :disableClose="disabled">{{one.name}}</memberLabel>
			</div>
		</inputContent>
	</el-popover>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
import inputContent from '@/afterSales/components/select/inputContent.vue';
import Clickoutside from 'element-ui/src/utils/clickoutside';
import moSelect from '@/afterSales/components/moSelect/index.vue';
import Emitter from '@/afterSales/mixins/emitter';
import { CommonModule } from '@/store/modules/common'
import memberLabel from '@/afterSales/components/moSelect/memberLabel.vue';
@Component({
  name: 'memberSelect',
  components: {
    inputContent,
    moSelect,
    memberLabel
  },
  directives: {
    Clickoutside
  }
})
export default class extends Vue {
  @Prop() public value!: any;
  @Prop({ default: false }) public disabled!: boolean;
  @Prop({ default: false }) public isCheckbox!: boolean;
  @Prop({ default: () => [] }) public options!: any;
  private visible = false;
  private popperElm: any;
  private dynamicMap = {
    currentUser: {
      id: 'currentUser',
      name: '当前用户',
      labelClass: 'label--user',
      headPic: 'iconfont iconchengyuan1 font14'
    }
  };

  private get tagArr () {
    if (this.value) {
      return this.value.split(',').map((id) => {
        const agents: any = CommonModule.publicCache.userListObj
        return agents[id] || this.dynamicMap[id] || {};
      });
    }
    return [];
  }

  private get valueShow () {
    if (!this.value) {
      return this.isCheckbox ? [] : '';
    }
    if (this.isCheckbox) {
      return this.value.split(',');
    }
    return this.value;
  }

  public focus () {
    this.visible = true;
  }

  public hideOnly () {
    this.visible = false;
  }

  private handleCheckChange (options) {
    this.$emit('input', options.join(','));
    this.change();
  }

  private change (v = '') {
    this.$emit('on-change');
    Emitter.methods.dispatch.call(this, 'ElFormItem', 'el.form.change', v);
  }

  private handleClickNode (id) {
    this.visible = false;
    if (id) {
      this.$emit('input', id);
    } else {
      this.$emit('input', '');
    }
    this.change();
  }

  private close (item) {
    const clearId = item._id + '';
    const valueArr = this.value.split(',');
    const value = valueArr.filter((id) => id !== clearId).join(',');
    this.$emit('input', value);
    this.change();
  }

  private clear () {
    this.$emit('input', '');
    this.change();
  }

  private mounted () {
    // this.inputWidth = this.$refs.reference.getBoundingClientRect().width
    // 配合v-clickoutside指令使用，点击popover内的元素，弹框不消失
    this.popperElm = (this.$refs.popover as any).$refs.popper;
  }
}
</script>

<style lang="stylus" scoped>
.select {
	display flex
	align-items center
}
</style>
